<template>
	<view class="hallBox">
		<view class="search">
			<uni-forms :modelValue="baseFormData">
				<uni-forms-item>
					<view class="searchIpt">
							<view class="example-body">
								<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
							</view>
					</view>
				</uni-forms-item>
				<view class="hall-content">
					<Recommended :reco="recommenList"></Recommended>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
import {recommendedList} from '@/api/home/home.js';
export default {
	data() {
		return {
			range: ['2021-02-1', '2021-3-28'],
			baseFormData: {
				name: '',
				age: '',
				introduction: '',
				sex: 2,
				hobby: [5],
				datetimesingle: 1627529992399
			},
			recommenList:{}
		};
	},
	mounted() {
		this.fetchRecommendList(),
		setTimeout(() => {
						this.datetimesingle = "2021-5-1";
						this.single = "2021-5-1";
					}, 1000);
	},
	methods: {
		// 获取首页 推荐沙石数据
		async fetchRecommendList() {
			let {data} =  await recommendedList(this.recommenList)
			this.recommenList = data.list
			// console.log(data);
		},
		maskClick(e) {
			console.log("maskClick事件触发",e);
		}
	}
};
</script>

<style lang="scss">
@import '@/static/iconfont.css';
.hallBox {
	min-height: 100vh;
	background-color: #212121;
}
.searchIpt {
	// display: flex;
	// align-items: center;
	// width: 340px;
	// height: 35px;
	// border-radius: 9px;
	// padding: 0 5px;
	// color: #8d8888;
	// margin: 8px auto 0;
}
.searchTime {
	width: 340px;
	height: 35px;
	background-color: #212121!important;
}
.icon {
	width: 20px;
	height: 20px;
}
.hall-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 340px;
	margin: 0 auto;
}
</style>
